Reducer Logic এবং Initial State সেট করা

Reducers Redux এর একটি অত্যন্ত গুরুত্বপূর্ণ উপাদান, যা স্টোরের স্টেট পরিবর্তন করার জন্য ব্যবহৃত হয়। রিডিউসার হল একটি pure function (বিশুদ্ধ ফাংশন) যা আগের স্টেট এবং ডিসপ্যাচ করা একশন অনুযায়ী নতুন স্টেট ফেরত দেয়। এখানে, আমরা রিডিউসার তৈরির মূল ধারণা এবং Initial State (প্রাথমিক স্টেট) সেট করার পদ্ধতি আলোচনা করব।

Reducer Logic কী?

Reducer হল একটি ফাংশন যা দুটি আর্গুমেন্ট নেয়:

1. State (আগের স্টেট): এটি হল স্টোরের বর্তমান স্টেট, যা রিডিউসারের মধ্যে পাঠানো হয়।
2. Action (একশন): ডিসপ্যাচ করা একশন অবজেক্ট, যা সাধারণত একটি type ফিল্ড এবং একটি payload (যদি থাকে) ধারণ করে।

এটি সর্বদা একটি নতুন স্টেট রিটার্ন করে এবং কখনোই সরাসরি পুরানো স্টেট পরিবর্তন করে না (এটি immutability principle অনুসরণ করে)।

Reducer এর মৌলিক গঠন

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };

    case 'REMOVE_TODO':
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.payload.id)
      };

    default:
      return state;
  }
}

এখানে:

• state: এটি আগের স্টেট, যা সাধারণত রিডিউসারের প্রথম আর্গুমেন্ট হিসেবে আসে। যদি এটি undefined হয় (যেমন প্রথমবার স্টোর তৈরি করা হচ্ছে), তবে রিডিউসার initialState ফেরত দেয়।
• action: ডিসপ্যাচ করা একশন অবজেক্ট।
• switch statement: একশনটির টাইপ চেক করে স্টেট পরিবর্তন করে। প্রতিটি case ব্লক নতুন স্টেট তৈরি করে, যা আগের স্টেটের উপর ভিত্তি করে হয়।

Initial State কী এবং কিভাবে সেট করবেন?

Initial State (প্রাথমিক স্টেট) হল অ্যাপ্লিকেশনের স্টেটের প্রথম মান, যা রিডিউসারের প্রথম রান বা স্টোর ইনিশিয়ালাইজ হওয়ার সময় ব্যবহৃত হয়। এটি আপনার অ্যাপ্লিকেশনের সর্বপ্রথম অবস্থার প্রতিনিধিত্ব করে।

যখন Redux স্টোর তৈরি হয়, তখন রিডিউসারের মধ্যে initialState সরবরাহ করা হয়। যদি রিডিউসারে স্টেটের মান undefined হয় (যেমন প্রথমবার স্টোর তৈরি করা হচ্ছে), তখন initialState সেট করা হয়।

Initial State সেট করা

আপনি সাধারণত initialState তৈরি করেন রিডিউসারের বাইরে একটি অবজেক্ট হিসেবে। এটি অ্যাপ্লিকেশনের প্রয়োজনীয় তথ্য ধারণ করে থাকে, যেমন:

• ইউজারের ইনফর্মেশন
• লোডিং স্টেট
• এপ্লিকেশনের বিভিন্ন আইটেমের তালিকা (যেমন, টুডো, পোস্ট)
• কোনো ডিফল্ট কনফিগারেশন

উদাহরণ:

const initialState = {
  todos: [],
  isLoading: false,
  error: null
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };

    case 'REMOVE_TODO':
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.payload.id)
      };

    case 'SET_LOADING':
      return {
        ...state,
        isLoading: action.payload
      };

    case 'SET_ERROR':
      return {
        ...state,
        error: action.payload
      };

    default:
      return state;
  }
}

এখানে:

• initialState: এটি প্রাথমিক স্টেট যা রিডিউসারে ডিফল্ট মান হিসেবে সেট করা হয়।
• todos: এটি টুডো আইটেমের তালিকা ধারণ করে।
• isLoading: এটি লোডিং স্টেট দেখায় (যেমন API কল করার সময়)।
• error: এটি কোনো ত্রুটি বা এরর মেসেজ ধারণ করে।

Reducer Logic এর কাজ কী?

1. State পরিবর্তন করা: রিডিউসার অ্যাপ্লিকেশনের স্টেট পরিবর্তন করার জন্য দায়ী। তবে, এটি সরাসরি স্টেট পরিবর্তন করে না, বরং একটি নতুন স্টেট অবজেক্ট তৈরি করে। এটি immutable প্রিন্সিপাল অনুসরণ করে।
2. স্টেট রিটার্ন করা: রিডিউসার সব সময় একটি নতুন স্টেট রিটার্ন করে, যা আগের স্টেটের উপর ভিত্তি করে হয়।
3. একশন টাইপ অনুযায়ী শাখা তৈরি করা: রিডিউসার বিভিন্ন একশন টাইপের জন্য আলাদা শাখা (case) তৈরি করে, যেখানে একশন অনুযায়ী স্টেট পরিবর্তন হয়।
4. ডিফল্ট স্টেট রিটার্ন করা: যদি কোনো মেলানো একশন টাইপ না পাওয়া যায়, তবে রিডিউসার আগের স্টেট (অথবা ডিফল্ট স্টেট) ফেরত দেয়।

Reducer এবং State Immutable রাখা

Redux-এ স্টেট কখনোই সরাসরি পরিবর্তন করা যাবে না, কারণ এটি immutability প্রিন্সিপাল অনুসরণ করে। তাই, রিডিউসার যখন স্টেট পরিবর্তন করে, তখন নতুন স্টেট অবজেক্ট তৈরি করতে হবে।

যেমন:

return {
  ...state, // আগের স্টেট কপি করুন
  todos: [...state.todos, action.payload] // নতুন টুডো আইটেম যোগ করুন
};

এখানে:

• ...state: এটি আগের স্টেটের সব প্রপার্টি কপি করে।
• [...state.todos, action.payload]: এটি আগের টুডো তালিকা কপি করে এবং নতুন টুডো আইটেম যোগ করে।

এই প্রক্রিয়ায়, আগের স্টেট অপরিবর্তিত থাকে এবং একটি নতুন স্টেট তৈরি হয়, যা Redux এর immutability নিয়মের সাথে সঙ্গতিপূর্ণ।

Default State বা Initial State কেন প্রয়োজন?

1. প্রথমবার স্টোর তৈরি হওয়ার সময়: যখন Redux স্টোর প্রথমবার তৈরি হয়, তখন স্টেটের কোনও মান থাকে না। এ সময় initialState প্রয়োজন যাতে ডিফল্ট মানগুলো থাকতে পারে।
2. রিডিউসার ফাংশনের নিরাপত্তা: স্টেট যদি undefined থাকে, তবে রিডিউসার একটি নিরাপদ এবং মানানসই ডিফল্ট স্টেট ফেরত দেয়।
3. একশন হ্যান্ডলিংয়ের স্থিতিশীলতা: প্রাথমিক স্টেট নিশ্চিত করে যে রিডিউসার সব সময় পূর্বনির্ধারিত কাঠামো অনুযায়ী স্টেট রিটার্ন করবে, যা অ্যাপ্লিকেশনের স্থিতিশীলতা বজায় রাখে।

সারাংশ

Reducers Redux এর স্টোরের স্টেট পরিবর্তন করার জন্য দায়ী। এটি একটি pure function যা আগের স্টেট এবং ডিসপ্যাচ করা একশন অনুযায়ী নতুন স্টেট রিটার্ন করে। Initial State হল অ্যাপ্লিকেশনের প্রথম ডিফল্ট স্টেট, যা রিডিউসারের প্রথম রান বা স্টোর ইনিশিয়ালাইজ হওয়ার সময় ব্যবহৃত হয়। রিডিউসার কখনোই সরাসরি স্টেট পরিবর্তন করে না, বরং নতুন স্টেট তৈরি করে। Immutability নিয়ম অনুসরণ করে, স্টেটের কোনো অংশ পরিবর্তন করার সময় একটি নতুন অবজেক্ট তৈরি করা হয়, যা স্টেটের পূর্ববর্তী অবস্থাকে অপরিবর্তিত রাখে।